<template>
  <div class="addGoods">
   <!-- 面包屑组件 -->
    <el-breadcrumb separator="/">
      <!-- to: 路由跳转对象，同 vue-router 的 to -->
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

  <!-- steps步骤条组件 -->
   <el-steps :active="active" finish-status="success">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
      <el-step title="步骤 4"></el-step>
      <el-step title="步骤 5"></el-step>
   </el-steps>

  <!-- Tabs标签组件   tab-position:设置Tabs标签的位置 -->
  <el-tabs tab-position="left" style="height: 200px;"  v-model="activeName" @tab-click="handleTab">
    <el-tab-pane label="基本信息" name="1" >基本信息</el-tab-pane>
    <el-tab-pane label="商品参数" name="2">商品参数</el-tab-pane>
    <el-tab-pane label="商品属性" name="3">商品属性</el-tab-pane>
    <el-tab-pane label="商品图片" name="4">商品图片</el-tab-pane>
    <el-tab-pane label="商品内容" name="5">商品内容</el-tab-pane>
  </el-tabs>

  </div>
</template>

<script>
export default {
  data () {
    return {
      // 当前steps步骤相应激活状态
      active: 0,
      /*
        设置当前选中的选项卡
       该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1'
      */
      activeName: '1'

    }
  },
  methods: {
    /* 处理Tabs标签的联动  */
    handleTab () {
      this.active = parseInt(this.activeName) - 1
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
